Introducción a HTML, CSS y SVG

IIC2026 2020-2

HTML

Introducción a HTML, CSS y SVG

IIC2026 2020-2

HTML


  • Lenguaje de marcado.
  • Una de las tecnologías básicas de la web.
  • Toda página web en funcionamiento es un documento HTML.

HyperText Markup Language

HyperText Markup Language


  • Documentos de texto con información añadida.
  • Permiten agregar enlaces e incluso multimedia.
  • Es el trabajo de un navegador web leer estor archivos de texto e interpretarlos visualmente.

Etiquetas

Etiquetas



						
						  (contenido)

Etiquetas



						
 Un título 


						
 Un párrafo 


						
 Un subtítulo 


						
 Otro párrafo

Etiquetas



						
     
						  
  • Primer elemento de lista.
    • 
						  
  • Segundo elemento de lista.
    • 
						  
  • Tercer elemento de lista.
    •

Estructura de documento completo



<!DOCTYPE html>

Estructura de documento completo



<!DOCTYPE html>
<html>

</html>

Estructura de documento completo



<!DOCTYPE html>
<html>
    
  <head>

  </head>

  <body>

  </body>

</html>

Estructura de documento completo



<!DOCTYPE html>
<html>
    
  <head>

  </head>

  <body>
    
    <h1> Un título </h1>

    <p> Un párrafo </p>

    <h2> Un subtítulo </h2>

    <p> Otro párrafo </p>

    <ul> 
      <li>Primer elemento de lista.</li>
      <li>Segundo elemento de lista.</li>
      <li>Tercer elemento de lista.</li>
    </ul>
    
  </body>

</html>

Estructura de documento completo



<!DOCTYPE html>
<html>
    
  <head>
    <meta charset="utf-8">
    <title>Título de documento completo</title>
  </head>

  <body>
    
    <h1> Un título </h1>

    <p> Un párrafo </p>

    <h2> Un subtítulo </h2>

    <p> Otro párrafo </p>

    <ul> 
      <li>Primer elemento de lista.</li>
      <li>Segundo elemento de lista.</li>
      <li>Tercer elemento de lista.</li>
    </ul>
    
  </body>

</html>

Atributos



<!DOCTYPE html>
<html>
    
  <head>
    <meta charset="utf-8">
    <title>Título de documento completo</title>
  </head>

  <body> 
    ...
  </body>

</html>

Atributos



					<a href="https://cursos.canvas.uc.cl/">Soy un enlace a Canvas!</a>

					<img src="./ruta/a/la/imagen.png"></img>

Atributos


Existen atributos globales:

  • id
  • class

id



						
 Soy el único título principal

						
 Yo no uwu

  • Permite identificar elemento específico en todo el documento.
  • Es único, solo un elemento puede tener un identificador específico.

class



						
 Soy un párrafo importante

						
 También soy importante

						
 Yo no uwu

  • Permite identificar grupos de elementos todo el documento.
  • Múltiples elementos pueden compartir un valor de clase.

HTML

Introducción a HTML, CSS y SVG

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!